<template>
	<coreshop-page title="搜索" mode="left">
		<view class="p-25">
			<view class="search-box">
				<uv-search v-model="state.keyWord" :showAction="true" actionText="搜索"
					@custom="handleSearch"></uv-search>
			</view>

			<view class="list-box" v-if="state.list.length > 0">
				<view class="item-box" v-for="item in state.list" :key="item.id">
					<view class="order-num">
						<text class="num">订单编号：{{ item.orderId }}</text>
						<text class="status">{{ item.shipStatusText }}</text>
						<uv-tags v-if="item.receiptType == OrderDistributionEnum.mailing" text="物流快递" plain size="mini"
							type="warning"></uv-tags>
						<uv-tags v-if="item.receiptType == OrderDistributionEnum.homeDelivery" text="同城配送" plain
							size="mini" type="warning"></uv-tags>
						<uv-tags v-if="item.receiptType == OrderDistributionEnum.selfDelivery" text="门店自提" plain
							size="mini" type="warning"></uv-tags>
					</view>
					<view class="goods-box">
						<view class="goods" v-for="itemChild in item.items" :key="itemChild.id">
							<coreshop-goods-card type="horizontal" imgHeight="140rpx" imgWidth="140rpx"
								:goodsData="hanldeCombinationGoodsData(itemChild)">
								<template #goodPrice>
									<view class="price-box">
										<view class="price">￥{{ itemChild.price }}</view>
										<view class="num">数量：{{ itemChild.nums }}</view>
									</view>
								</template>
							</coreshop-goods-card>
						</view>
					</view>
					<view class="peo-box">
						<view class="time">{{timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss')}}</view>
						<view class="peo">{{ item.shipName }}【{{ item.shipMobile }}】</view>
					</view>
					<view class="order-status-box">
						<view>
							<uv-tags v-if="item.status == OrderStatusEnum.pending" text="订单正常" plain
								size="mini"></uv-tags>
							<uv-tags v-if="item.status == OrderStatusEnum.complete" text="订单完成" plain size="mini"
								type="success"></uv-tags>
							<uv-tags v-if="item.status == OrderStatusEnum.cancel" text="订单取消" plain size="mini"
								type="error"></uv-tags>
						</view>
						<view class="status">
							{{item.payStatusText}}
							<text v-if="item.paymentCodeText">【{{item.paymentCodeText}}】</text>
						</view>
						<view class="price">
							实付款：<text class="amount">￥{{item.payedAmount}}</text>
						</view>
					</view>
				</view>
				<view class="no-data" v-if="state.page === state.totalPages">没有更多了呀</view>
			</view>
			<view v-else>
				<coreshop-empty :mode="EmptyEnum.data" text="暂无数据"></coreshop-empty>
			</view>
		</view>
	</coreshop-page>

</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	import { EmptyEnum, OrderDistributionEnum, OrderStatusEnum } from '@/core/enum';
	import { queryOrderPageByMerchantSearch } from '@/core/api';
	import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	import type { Response } from '@/core/models';
	import { handleShowToast } from '@/core/utils';

	interface QueryParams {
		keyWord : string;
		storeId : number;
	}

	const state = reactive<{
		list : Array<any>;
		page : number;
		totalPages : number;
		keyWord : string;
		storeId : number;
	}>({
		list: [],
		page: 1,
		totalPages: 1,
		keyWord: "",
		storeId: 0,
	})

	onLoad((query : QueryParams) => {
		state.keyWord = query?.keyWord;
		state.storeId = query?.storeId;
		getOrderPageByMerchant();
	});

	onReachBottom(() => {
		if (state.totalPages > state.page) {
			state.page++;
			getOrderPageByMerchant();
		}
	});

	const getOrderPageByMerchant = async () => {
		const merchant : Response<any> = await queryOrderPageByMerchantSearch({
			keyword: state.keyWord,
			page: state.page,
			limit: 10,
			storeId: state.storeId,
		});
		if (merchant.status) {
			state.totalPages = merchant.data?.totalPages;
			state.list = state.list.concat(merchant.data?.pages);
		} else {
			handleShowToast(merchant.msg)
		}
	}

	/** 组合商品数据传入组件 */
	const hanldeCombinationGoodsData = (item : any) => {
		return {
			id: item.id,
			image: item.imageUrl,
			name: item.name,
			brief: item.addon,
		}
	}

	/** 搜索 */
	const handleSearch = () => {
		if (!state.keyWord) {
			handleShowToast("请输订单号、收货人手机号、收货人姓名")
			return;
		}
		state.page = 1;
		state.list = [];
		getOrderPageByMerchant();
	}
</script>

<style scoped lang="scss">
	@import './search.scss';
</style>